<template>
  <div class="content-height scroll-bar">
    <div class="search-class">
      <Row>
        <Col span="6">
          <Select
            v-model="searchParams.enterpriseId"
            style="width:200px;"
            ref="treeSelect"
            placeholder="请选择机构"
          >
            <Option
              v-for="item in list"
              :value="item.enterpriseId"
              :key="item.enterpriseId"
              style="display: none;"
              >{{ item.title }}</Option
            >
            <Tree
              :data="orgList"
              style="padding-left:20px"
              @on-select-change="checkEng"
            ></Tree>
          </Select>
        </Col>
        <Col span="6">
          <Select
            v-model="searchParams.projectTeamId"
            style="width:200px;"
            ref="treeSelectPro"
            placeholder="项目部"
          >
            <Option
              v-for="item in list1"
              :value="item.proId"
              :key="item.proId"
              style="display: none;"
              >{{ item.title }}</Option
            >
            <Tree
              :data="proList"
              style="padding-left:20px"
              @on-select-change="checkPro"
            ></Tree>
          </Select>
        </Col>
        <Col span="6">
          <Input
            v-model="searchParams.name"
            style="width:200px;"
            placeholder="姓名"
          />
        </Col>
        <Col span="6">
          <Input
            v-model="searchParams.tel"
            style="width:200px;"
            placeholder="联系电话"
          />
        </Col>
        <Col span="6" style="margin-top: 20px;">
          <Input
            v-model="searchParams.idCard"
            style="width:200px;"
            placeholder="身份证号"
          />
        </Col>
        <Col span="6" style="margin-top: 20px;">
          <Select
            v-model="searchParams.postId"
            style="width:200px;"
            placeholder="职务"
          >
            <OptionGroup label="通用">
              <Option
                v-for="item in postList.generalPostList"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </OptionGroup>
            <OptionGroup label="专业">
              <Option
                v-for="item in postList.proprietaryPostList"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </OptionGroup>
          </Select>
        </Col>
        <Col span="6" style="margin-top: 20px;">
          <Select
            v-model="searchParams.workStatus"
            style="width:200px;"
            placeholder="人员状态"
          >
            <Option
              v-for="item in personStatusList"
              :value="item.code"
              :key="item.code"
              >{{ item.name }}</Option
            >
          </Select>
        </Col>
        <Col span="6" style="text-align: right">
          <span class="search-title"></span>
          <Button
            type="primary"
            style="margin-right: 15px"
            @click="getPersonList"
            v-if="control.search"
            >搜索</Button
          >
        </Col>
      </Row>
    </div>
    <Table
      border
      :columns="columns"
      :data="personList"
      class="scroll-bar"
    >
      <template slot-scope="{ row, index }" slot="action">
        <span
          title="详情"
          class="button-class"
          @click="detailBtn('details', row.personUserOrgId, '人员详情')"
          type="text"
          v-if="control.detail"
          >详情</span
        >
      </template>
    </Table>
    <Row type="flex" justify="center">
      <Col>
      <Page
        class="pagination"
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="[10,20,50,100]"
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
        show-elevator
        show-total
        show-sizer
      />
      </Col>
    </Row>
  </div>
</template>
<script>
import tree from 'vue-giant-tree'
export default {
  name: 'CompanyStaffInquiry',
  components: {
    tree
  },
  data() {
    return {
      searchParams: {}, //搜索条件
      orgList: [], //机构树
      proList: [], //项目部树
      postList: [], //职务
      personList: [], //人员列表
      list: [], //机构SELECT选择
      list1: [], //专业类型SELECT选择
      wbsList: [], //专业类型
      personStatusList: [],
      showTree: false,
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 70,
          render: (h, params) => {
            return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
          }
        },
        {
          title: '姓名',
          key: 'name',
          width: '250',
          align: 'center'
        },
        {
          title: '性别',
          key: 'dictSex',
          align: 'center',
          width: '70'
        },
        {
          title: '身份证号',
          align: 'center',
          key: 'idcard'
        },
        {
          title: '联系电话',
          align: 'center',
          key: 'tel'
        },
        {
          title: '职务',
          align: 'center',
          key: 'postName'
        },
        {
          title: '状态',
          align: 'center',
          key: 'checkStatus',
        },
        {
          title: '部门',
          align: 'center',
          key: 'deptName'
        },
        {
          title: '工区',
          align: 'center',
          key: 'workPointName'
        },
        {
          title: '项目部',
          align: 'center',
          key: 'projectTeamName'
        },
        {
          title: '机构',
          align: 'center',
          key: 'enterpriseName'
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action'
        }
      ],
      listParam: {
        name: ''
      },
      control:{},
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  methods: {
      //跳转详情
      detailBtn(type, id, name) {
        this.$router.push({
          path: `person-detail/${type}/${id}/${name}`,
          query: {
            current: this.page.current,
            pageSize: this.page.pageSize
          }
        })
      },
      //按钮权限
      buttonShow() {
        let buttonList = JSON.parse(localStorage.getItem('buttonList'))
        buttonList.map(val => {
          let key = Object.keys(val).toString()
          if (key === this.$route.name) {
            console.log(val);
            Object.values(val)[0].map(item => {
              if (item.code == 'P_040202_01') {
                this.control.search = true
              } else if (item.code == 'P_040202_02') {
                this.control.detail = true
              }
            })
          }
        })
      },
      //查询用户权限
      getUserDetail() {
        this.$api.projectInquiry.getUserDetail().then(res => {
          if (res.code == 200) {
            if (res.data.userInOrgType == 'PROJECT_TEAM_USER') {
              this.searchParams.enterpriseId = res.data.enterpriseId
              this.searchParams.projectTeamId = res.data.projectTeamId
            }
          } else {
            this.$Message.error(res.data.msg)
          }
        })
      },
      //获取工程类型
      getOrgTree() {
        this.orgList = [];
        this.list = [];
        this.$api.projectInquiry.getOrgTree().then((res) => {
          if (res.code == 200) {
            this.orgList = res.data;
            this.searchParams.enterpriseId = this.orgList[0].objectId
            let enterpriseId = this.orgList[0].objectId
            let title = this.orgList[0].title
            this.list.push({
              title,
              enterpriseId
            })
            this.getProTree(enterpriseId);
            this.getPersonList();
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      checkEng(data) {
        if (data.length > 0) {
          this.searchParams.projectTeamId = '';
          this.list = []
          this.list1 = []
          this.proList = []
          let enterpriseId = data[0].objectId
          let title = data[0].title
          this.list.push({
            title,
            enterpriseId
          })
          this.getProTree(data[0].objectId);
          this.searchParams.enterpriseId = enterpriseId
          this.$refs.treeSelect.visible = false
        }
      },
      //获取机构树

      getProTree(id) {
        if (id) {
          this.$api.projectInquiry
            .getProTree(id)
            .then(res => {
              if (res.code == 200) {
                this.proList = res.data.tree;
                this.searchParams.projectTeamId = res.data.userProjectTeamId;
                let title = res.data.userProjectTeamShoreName;
                let proId = res.data.userProjectTeamId;
                this.list1 = [{
                  title,
                  proId
                }]
                this.getPostList(this.proList[0].objectId);
              } else {
                this.$Message.error(res.data.msg)
              }
            })
        } else {
          this.$Message.warning('请先选择机构')
        }
      },
      checkPro(data) {
        if (data.length > 0) {
          this.list1 = []
          let proId = data[0].objectId
          let title = data[0].title
          this.list1.push({
            proId,
            title
          })
          this.getPostList(data[0].objectId);
          this.searchParams.projectTeamId = proId
          this.$refs.treeSelectPro.visible = false
        }
      },
      //获取职务
      getPostList(id) {
        let data = {
          objectId: id
        }
        this.$api.ProjectPerson.getJobList(data).then(res => {
          if (res.code === 200) {
            this.postList = res.data
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      //获取人员状态
      getPersonStatus() {
        let code = 'PERSON_STATE'
        this.$api.ProjectPerson.getListByTypeCode(code).then(res => {
          if (res.code === 200) {
            this.personStatusList = res.data
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      //获取项目列表
      getPersonList() {
        let data = {
          pageSize: this.page.pageSize,
          currentPage: this.page.current,
          whereMap: this.searchParams
        }
        data.whereMap.searchType = 2;
        this.$api.projectInquiry.getPersonList(data).then(res => {
          if (res.code == 200) {
            if (res.data.resultObject) {
              this.personList = res.data.resultObject;
              this.page.total = res.data.totalRecord
              this.page.totalPage = res.data.totalPages
              this.personList.forEach(item => {
                if (item.dictSex == 'MALE') {
                  item.dictSex = '男'
                } else {
                  item.dictSex = '女'
                }
                if(item.checkStatus == 'WORK_AREA_STATE_1'){
                  item.checkStatus = '在场'
                }else{
                  item.checkStatus = '离场'
                }
              })
            }else{
              this.page = {
                total: 0,
                current: 1,
                pageSize: 10,
                totalPage: 0
              },
              this.personList = [];
            }
          } else {
            this.$Message.error(res.message)
          }
        })
      },

      pageChange(current) {
        this.page.current = current
        this.getPersonList()
      },
      sizeChange(size) {
        this.page.pageSize = size
        this.getPersonList()
      },
      //搜索
      searchAction() {
        this.page.current = 1
        this.page.size = 10
      },
      //重置
      resetParam() {
        this.searchParams = {}
        this.page.current = 1
        this.page.size = 10
        this.getOrgTree()
        this.getPersonList()
      },
    },

    mounted() {
      this.getUserDetail()
      this.getOrgTree()
      this.buttonShow()
      this.getPersonStatus()
    }
}
</script>
<style>
.tree {
  width: 250px;
  margin-left: 50px;
  overflow: auto;
  height: 200px;
}
.search-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: block;
}
</style>
